<template>
  <div class="adverti">
    <div class="title">点击观看广告获取章鱼丸奖励</div>
    <ul>
      <li class="liYes"></li>
      <li class="liYes"></li>
      <li class="liNo"></li>
    </ul>
    <div class="btn btn2" :class="{'btn1':isClickBtn}" @click="receive">立即领取</div>
  </div>
</template>
<script>
export default {
  name: "adverti",
  data() {
    return {
      isClickBtn: false
    };
  },
  methods: {
    receive() {
      if (!this.isClickBtn) return;
      alert(1);
    }
  }
};
</script>
<style lang="stylus" scoped>
.adverti {
  width: 100%;

  .title {
    line-height: 0.7rem;
    background: #FEA90B;
    font-size: 20px;
    text-align: center;
    color: #fff;
    margin-bottom: 15px;
  }

  ul {
    li {
      width: 6.86rem;
      height: 1.92rem;
      background: rgba(0, 0, 255, 0);
      border-radius: 0.1rem;
      margin: 10px auto;
      background: pink;
    }

    .liYes {
      background: url('../img/ywc.png');
      background-size: 100% 100%;
    }

    .liNo {
      background: url('../img/wwc.png');
      background-size: 100% 100%;
    }
  }

  .btn {
    width: 6.18rem;
    height: 1rem;
    line-height: 1rem;
    opacity: 0.97;
    border-radius: 10px;
    margin: 30px auto;
    text-align: center;
    font-size: 20px;
    color: #fff;
  }

  .btn2 {
    background: #a0a0a0;
    box-shadow: 0px 3px 9px 0px #898989;
  }

  .btn1 {
    background: #FF642C;
    box-shadow: 0px 3px 9px 0px rgba(91, 24, 0, 0.47);
  }
}
</style>

